iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0
Mobile Development

《30 天 Flutter:跨平台 AI 行程規劃 App》系列 第 8

Day 8 - 解鎖 Dart MCP Server:開發效率瞬間提升的秘密武器

  • 分享至 

  • xImage
  •  

今天氣到不要不要的,決定好好研究一下 Dart MCP Server 能不能直接取代公司同事,至少加速整個專案開發!這項功能是 Dart 3.9 之後才推出的,根據官網的介紹,它能協助的功能超多:

* Analyze and fix errors in your project's code.
* Resolve symbols to elements to ensure their existence and fetch documentation and signature information for them.
* Introspect and interact with your running application.
* Search the pub.dev site for the best package for a use case.
* Manage package dependencies in your pubspec.yaml file.
* Run tests and analyze the results.
* Format code with the same formatter and config as dart format and the Dart analysis server.

看到這些功能,我當下就覺得 Dart MCP Server 如果官網不誇大的話有希望!它可以自動分析並修復程式碼,再也不會看到那堆紅色的錯誤訊息,然後同事還直接無視就發 PR。它能幫我找套件,還會自動安裝,更能維持一致的 coding style,寫完程式後自動格式化和分析。給它需求時,它還會看上下文,不用我一步一步地告訴它哪裡要改。感覺我同事真的可以被取代了啊~

安裝與設定:比想像中簡單

接著來實際測試一下,看看這東西是不是真的那麼強大!稍微看了一下決定使用 VSCode + Gemini Code Assist 的組合,畢竟目前免費(想更聰明當然也可以花錢),我的 Flutter 環境如下:

Flutter 3.35.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 20f8274939 (8 days ago) • 2025-08-14 10:53:09 -0700
Engine • hash 6cd51c08a88e7bbe848a762c20ad3ecb8b063c0e (revision 1e9a811bf8) (8 days ago) • 2025-08-13 23:35:25.000Z
Tools • Dart 3.9.0 • DevTools 2.48.0

接著按照官方教學一步步操作:

  1. 在 IDE 中設定要使用的 Gemini Code Assist 版本
  2. 將 Gemini Code Assist 發布管道設為「搶先體驗」版本
    • 開啟指令區塊面板 (Cmd + Shift + P),然後選取「Open User Settings JSON」。
    • 在設定檔中加入 "geminicodeassist.updateChannel": "Insiders",

成功後,畫面跑出 Hello World,看起來一切順利!
https://ithelp.ithome.com.tw/upload/images/20250822/201781955tyEJFjLKL.png

接下來,在專案中新增 .gemini/settings.json,其他想加的 MCP server 也都是放在這裡:

{
    "mcpServers": {
        "dart": {
            "command": "dart",
            "args": [
                "mcp-server"
            ]
        }
    }
}

然後,在對話框開啟代理模式,輸入 /mcp,看到下圖畫面就代表安裝完成囉!

安裝過程超級簡單,若遇到問題,可以檢查一下 Dart 版本或 VSCode 的路徑設定。

補充有串好和沒串實測落差很大,你要是在思索你的 Gemini Code Assist 怎麼笨笨的可以稍微確認一下 mcp 有沒有跑起來,或就換個助手吧~官網介紹的 AI 助手蠻多的可以試試了~

實際體驗:效率爆炸提升

接著就是見證奇蹟的時刻了!

我輸入:「I need a Flutter package to integrate an AI service for travel itinerary generation and a package for building the dynamic user interface, including interactive elements like collapsable daily plans.」

它立刻推薦並安裝了套件,稍微檢查下都是目前還有正常維運的套件:

然後我請它幫我寫範例,只輸入了 write a example,它就自動開始工作了!

當程式碼有問題時,我輸入 fix problem,它雖然嫌棄我說的太籠統但還是開始進行自動讀取內容並進行修正:
https://ithelp.ithome.com.tw/upload/images/20250822/20178195upM6L1i0zG.png

中間扣除它要求申請 Gemini API Key(還直接給我產生金鑰的網站,超級貼心)其他完全不用你操心,寫任何程式,且從下第一個指令到最後完成下面的成果,整個過程只花了 8 分 12 秒,棒到讓我覺得…糟糕,我同事看來真的可以被取代了,哈!


上一篇
Day 7 - 不只是深色模式:讓你的 Flutter App 也有個性主題
下一篇
Day 9 - 從迷路到清晰:用 Deepwiki 快速理解 Riverpod
系列文
《30 天 Flutter:跨平台 AI 行程規劃 App》21
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言